<template>
	<el-form label-position="top" style="width: 400px;">
		<el-form-item label="商品名称" required>
			<el-input v-model="formData.name" placeholder="输入商品名称" maxlength="20"></el-input>
		</el-form-item>
		<el-form-item label="商品类别" required>
			<el-cascader v-if="!categoryLoading" v-model="formData.categoryId" :props="categoryProps" placeholder="选择商品类别" class="w-100"></el-cascader>
		</el-form-item>
		<el-form-item label="商品品牌" required>
			<el-select v-model="formData.brandId" placeholder="选择商品品牌" class="w-100">
				<el-option v-for="(item, index) in brands" :key="index" :label="item.name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="商品标题">
			<el-input v-model="formData.title" placeholder="输入商品标题" maxlength="30"></el-input>
		</el-form-item>
		<el-form-item label="商品单位" required>
			<el-select v-model="formData.unit" filterable allow-create default-first-option placeholder="选择商品单位" class="w-100">
				<el-option v-for="(item, index) in units" :key="index" :label="item" :value="item"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="预警库存">
			<el-input v-model="formData.warningStock" placeholder="输入预警库存" type="number">
				<template slot="append">{{formData.unit}}</template>
			</el-input>
		</el-form-item>
		<el-form-item label="单次可买">
			<el-input v-model="formData.maxBuy" placeholder="输入单次最多购买数量" type="number">
				<template slot="append">{{formData.unit}}</template>
			</el-input>
		</el-form-item>
		<el-form-item label="商品描述">
			<el-input v-model="formData.introduction" type="textarea" placeholder="输入商品描述" maxlength="200" show-word-limit
			 :autosize="{minRows: 4}" resize="none"></el-input>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		props: {
			goods: {}
		},
		watch: {
			goods(e) {
				for (let key in this.formData) this.formData[key] = e[key];

				// 查询类别的父类别id
				this.categoryLoading = true;
				this.$util.request('/category/parentId', {
					id: e.categoryId
				}, (parentId) => {
					this.formData.categoryId = [parentId, e.categoryId];
					this.categoryLoading = false;
				}, true);
			}
		},
		data() {
			return {
				formData: {
					name: '',
					categoryId: [],
					brandId: '',
					title: '',
					introduction: '',
					unit: '',
					warningStock: 100,
					maxBuy: 5
				},
				categoryLoading: false,
				categoryProps: {
					lazy: true,
					expandTrigger: 'hover',
					lazyLoad: (node, resolve) => {
						this.$util.request('/category', {
							parentId: node.root ? 0 : node.value
						}, (res) => {
							res = res.map(e => {
								return {
									label: e.name,
									value: e.id,
									leaf: !node.root
								}
							});
							resolve(res);
						}, true);
					}
				},
				brands: [],
				units: ['个', '件', '箱', '枚', '支', '盒']
			}
		},
		created() {
			this.formData.unit = this.units[0];
			this.findBrands();
		},
		methods: {
			findBrands() {
				this.$util.request('/brand', {}, (res) => {
					this.brands = res;
				}, true);
			},
			returnValue() {
				const rules = {
					name: '输入商品名称',
					categoryId: '选择商品类别',
					brandId: '选择商品品牌',
					unit: '选择或输入商品单位'
				};

				for (let key in rules) {
					if (!this.formData[key]) return this.$util.msg('请' + rules[key]);
				}
				if (this.formData.warningStock < 0) return this.$util.msg('预警库存必须大于等于0');
				if (this.formData.maxBuy < 0) return this.$util.msg('最大可买数量必须大于等于0');

				return Object.assign(this.formData, {
					categoryId: this.formData.categoryId[1]
				});
			}
		}
	}
</script>

<style>
</style>
